<template>
    <el-card shadow="hover" id="card"  class="box-card" @click.stop="handleChakan1">
      <div class="img-box">
          <el-image fit="fill" style="width: 100%; height: 100%;" :src="cardData.imgUrl"></el-image>
      </div>
      <!-- <div class="boxImg">
          <img :src="cardData.imgUrl" id="img">
          <div style=""  v-if="cardData.releaseNo != null">
              <span style="position:absolute;left: 5px;">回调编号:</span>
              <p style="margin: 0 0 0 10px;">{{ cardData.releaseNo }}</p>
          </div>
      </div> -->
      <!-- <span style="font-weight: 300;">
          <longName :longName="cardData.companyName"></longName>
      </span> -->
      <span style="font-weight: 400;">
        <el-tooltip :content="cardData.companyName" placement="top">
          <p class="text-ellipsis" style="margin: 5px 0 15px 0;">{{cardData.companyName}}</p>
        </el-tooltip>
      </span>
      <div class="boxMsg">
        <div class="logStation">
          <div style="text-align: left;width:45%;">
            <template v-if="cardData.carryCityName.length < 6">
              <template v-if="carryCityCountry.length < 7">
                  <el-popover placement="top-start" :width="200" trigger="hover" :content="carryCityCountry">
                      <template #reference>
                          <span style="font-size: 16px;font-weight: 600;color: black;">{{ carryCityCountry.substring(0,5)}}</span>
                      </template>
                  </el-popover>
              </template>
              <!-- <span style="font-size: 16px;font-weight: 600;color: black;">{{ cardData.carryCityName }}/</span>
              <span v-if="carryCityCountry.length < 7">444{{ cardData.carryCountryName}}<span>...</span></span> -->
              <template v-else>
                <el-popover placement="top-start" :width="200" trigger="hover" :content="carryCityCountry">
                  <template #reference>
                    <span>{{ carryCityCountry.substring(cardData.carryCityName.length + 1, 5) }}
                      <span>...</span>
                    </span>
                  </template>
                </el-popover>
              </template>
            </template>
            <template v-else>
              <el-popover placement="top-start" :width="200" trigger="hover" :content="carryCityCountry">
                <template #reference>
                  <span style="font-size: 16px;font-weight: 600;color: black;">{{cardData.carryCityName.substring(0,3)}}
                    <span>...</span>
                  </span>
                </template>
              </el-popover>
            </template>
          </div>
          <div style="text-align: center;flex: 1;">
            <img style="text-align: center;padding-top: 3px; width: 16px;" src="@/assets/icons/svg/right.svg">
          </div>
          <div style="text-align: right;width: 45%;">
            <template v-if="cardData.returnCityName.length < 6">
              <template v-if="returnCityCountry.length < 7">
                <el-popover placement="top-start" trigger="hover" :content="returnCityCountry">
                  <template #reference>
                    <span style="font-size: 16px;font-weight: 600;color: black;">{{ returnCityCountry.substring(0,5) }}</span>
                  </template>
                </el-popover>
              </template>
              
              <!-- <span v-if="returnCityCountry.length < 7" style="font-size: 16px;font-weight: 600;color: black;">{{ returnCityCountry }}</span> -->
              <!-- <span v-if="returnCityCountry.length < 7" style="font-size: 14px;color: #999999;">/{{ returnCityCountry }}</span> -->
              <template v-else>
                <el-popover trigger="hover" :content="returnCityCountry">
                  <template #reference>
                    <span>
                      {{ returnCityCountry.substring(cardData.returnCityName.length + 1, 6) }}
                      <span>...</span>
                    </span>
                  </template>
                </el-popover>

              </template>
            </template>
            <template v-else>
              <el-popover placement="top-start" :width="100" trigger="hover" :content="returnCityCountry">
                <template #reference>
                  <span style="font-size: 16px;font-weight: 600;color: black;">{{ cardData.returnCityName.substring(0,5) }}
                    <span>...</span>
                  </span>
                </template>
              </el-popover>

            </template>
          </div>
        </div>
          <div class="relatedInfo" style="text-align: left;color:#212121 ;">
              <span>{{ boxTypeFilter(1) }}</span>
              <span>{{ boxConditionFilter(1) }}</span>
              <span v-if="cardData.boxUsagePeriod !=undefined">箱使期{{cardData.boxUsagePeriod}}天</span>
          </div>
          <div class="price" style="text-align: left;">
              <span style="color:rgb(255, 0, 0);font-weight: 700;font-size: 18px;margin: 13px 0;">￥{{ cardData.minUnitPrice }}</span>
              <span style="color:#212121;text-align: right;">回调箱量{{cardData.totalInventoryQty}}个</span>
          </div>
          
          <div style="float: left;width: 100%;margin-bottom: 20px;">
              <el-button icon="ChatDotSquare" type="primary" @click.stop="handleZixun1" plain style="width: 40%;">咨询</el-button>
              <el-button v-if="isOrder" type="primary" @click.stop="handleXiaDan1" style="width: 40%;float: right;">下单</el-button>
          </div>
      </div>
    </el-card>

    <el-dialog v-model="param.centerDialogVisible" title="提示" width="500" destroy-on-close center>
      <span>
        您还未完成企业实名认证，请您完成企业实名认证后，就可以进行相应业务功能操作啦！
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="param.centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="goAuthenticate">企业实名认证</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { InfoFilled } from '@element-plus/icons-vue'
  import { computed, reactive, ref } from 'vue';
  import { formatDate } from '@/utils'
  import uploadFile from '@/components/upload/index.vue'
  import useUserStore from '@/store/modules/user'
  import longName from '@/components/cardRentBox/longName'
  import { useRouter } from 'vue-router'
  const userStore = useUserStore()
  
  const emit = defineEmits(['pageChange', 'handleAction','handleXiaDan','handleChakan'])
  // const emit = defineEmits()
  const switchMap = ref()
  // 定义父组件传过来的值
  const props = defineProps({
    cardData: {
        type: Object,
        default: () => { }
    },
    // 列表内容
    data: {
      type: Array,
      default: () => [],
    },
    // 表头内容
    header: {
      type: Array,
      default: () => [],
    },
    // 配置项
    config: {
      type: Object,
      default: () => { },
    },
    // 表头按钮
    button: {
      type: Array,
      default: () => [],
    },
  });
  // 获取父组件 配置项（必传）
  // const getConfig = computed(() => {
  //   return props.config;
  // });
  // 设置 tool header 数据 
  // eg: maybe wrong ?
  // const setHeader = computed(() => {
  //   console.log(props.header)
  //   return props.header.filter((v) => v.isCheck);
  // });
//   const commands = computed(() => {
//     props.button.map((v) => {
//       v.isShow = (row: any) => {
//         return v.isShow ? v.isShow(row) : true;
//       };
//     });
//     return props.button;
//   });
const isOrder = computed(() => {
  const user = userStore.getUser() //user信息
  if(props.cardData.companyId == user.companyId){
    return false
  }else{
    return true
  }
})
  const state = reactive({
    boxTypeData:"",
    boxConditionData:"",
    page: {
      pageNum: 1,
      pageSize: 10
    }
  });
  const carryCityCountry = computed(() => {
        const obj = props.cardData
        let cityCountry = ""
        if(obj.carryCountryName != undefined  ){
          cityCountry =  obj.carryCityName + '/' + obj.carryCountryName
        }else{
          cityCountry =  obj.carryCityName
        }
        
        return cityCountry
    })
    const returnCityCountry = computed(() => {
        const obj = props.cardData
        let cityCountry = ""
        if(obj.returnCountryName != undefined){
          cityCountry = obj.returnCityName + '/' + obj.returnCountryName
        }else{
          cityCountry = obj.returnCityName
        } 
        return cityCountry
    })
    //过滤
    const boxConditionFilter = (val: any) => {
        let boxCondition = props.cardData.releaseCallbackPriceList[0].boxCondition;
        let result = ''
        const boxConditionList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
        boxConditionList.forEach((item: { value: any; label: any; }) => {
            if (item.value == boxCondition) {
            result = item.label
            }
        })
        return result
    }
   
    const boxTypeFilter = (val: any) => {
        let boxType = props.cardData.releaseCallbackPriceList[0].boxType;
        let result = ''
        const boxTypeList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
        boxTypeList.forEach((item: { value: any; label: any; }) => {
            if (item.value == boxType) {
            result = item.label
            }
        })
        return result
    }

const param = reactive({
  centerDialogVisible:false
})

  const handleXiaDan1 = () => {
  if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
    param.centerDialogVisible = true
  }else{
    emit('handleXiaDan')
  }
}
const handleZixun1 = () => {
   if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
      param.centerDialogVisible = true
   }else{
      console.log('点击了咨询')
      // emit('handleXiaDan')
    }
}
const handleChakan1 = () => {
  // if (userStore.getUser() && userStore.getUser().examineStatus != '10') {
  //   param.centerDialogVisible = true
  // } else {
  //   console.log(1)
  //   emit('handleChakan')
  // }
  emit('handleChakan')

}

  // 实名认证
  const router = useRouter();
const goAuthenticate = () => {
  router.push('/enterpriseManage/realAuthentication')
  param.centerDialogVisible = false
}
  function formatCity(list: any, key2: any) {
    list = JSON.parse(list);
    let name = ''
    list.map((item: any, index: number) => {
      name = name + (index == 0 ? '' : '/') + item[key2]
    })
    return name
  }
  
  // 分页数量
  const onHandleSizeChange = (val: number) => {
    state.page.pageSize = val;
    // tableInstanceRef.value!.clearSelection();
    emit('pageChange', state.page);
  };
  // 分页页码
  const onHandleCurrentChange = (val: number) => {
    state.page.pageNum = val;
    // tableInstanceRef.value!.clearSelection();
    emit('pageChange', state.page);
  };
  
  // 操作栏事件
//   const handleAction = (command: string, row: any) => {
//     if (!command) return
//     // console.log("------------------------------------");
//     // console.log(row);
//     emit(command, row);
//   };
  
  //上传文件 
//   const uploadSuccess = (list: any, command: string, row: any) => {
//     if (!command) return
//     row.uploadFiles = list
//     emit(command, row);
//   }
  
  // 多选
//   const multipleSelection = ref([])
//   const handleSelectionChange = (val: any) => {
//     // console.log(val)
//     multipleSelection.value = val
//   }
  
//   defineExpose({
//     multipleSelection
//   })

  
  </script>
  
  <style scoped>
    #card {
        opacity: 1;
        background: #ffffff;
        margin: 5px;
        text-align: center;
        overflow: hidden;
    }

    #img {
        width: 238px;
        height: 238px;
        opacity: 1;
        border-radius: 1px;
    }
    .boxMsg{
        font-size: 14px;
        color: #999999;
        border-collapse:separate; 
        border-spacing:0px 5px;
        margin-top: -20px;
    }
    .logStation{
      display: flex;
      justify-content: center;
      padding: 14px 0;
        /* text-align: left;
        margin: 15px 0; */
    }
    .relatedInfo > span{
        border: 1px solid #eeeeee;
        padding: 0 5px;
        border-radius: 4px;
        margin-right: 5px;
    }
    .price > span{
        display: inline-block;
        width: 50%;
    }

    .boxImg{
        position: relative;
    }
    .boxImg > div{
        width: 100%;
        position: absolute;
        bottom: 3px;
        left: 0;
        font-size: 12px;
        color: #ffffff;
        background: #ffa200;
        /* background: linear-gradient(to right, #ffa200, #ffffff); */
    }

    .box-card{
      width: 19%;
      float: left;
      margin:0 1% 10px 0
    }
    .img-box{
      width: 100%;
      height: 275px;
    }
  </style>
  